Me preguntaba Toni´s la forma de añadir efecto hover en el borde de una imagen.
El efecto hover cambia el aspecto de un elemento cuando se sitúa el puntero sin que sea seleccionado y vuelve a su estado original cuando se retira el puntero.
Para el ejemplo he añadido los estilos de borde que tengo en las imágenes de mis entradas, de esa forma respondo al mismo tiempo a los que me preguntaron por ese detalle.
La diferencia está que para añadir los estilos a las imágenes de los post lo hacemos en:

.post img {
......
......
......
}

Si deseamos añadir un borde a las imágenes añadimos antes de ]]></b:skin>

.border img{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-khtml-border-radius: 5px;
padding: 5px;
background: #ffffff;
border-top: 1px solid #969696;
border-left: 1px solid #969696;
-moz-box-shadow: 2px 2px 4px #696969;
-webkit-box-shadow:2px 2px 4px #696969;
box-shadow:2px 2px 4px #696969;
}

Y en una entrada o gadget de html añadimos:

<div class="border"><img src="url-imagen"/></div>

La imagen se vería de esta forma.



Si además de los estilos para el borde añadimos unos estilos para el efecto hover la misma imagen al pasar el puntero mostraría los nuevos estilos.

.hover img:hover {
padding: 5px;
background:#ffffff;
border-top: 1px solid #475E0B;
border-left: 1px solid #475E0B;
-moz-box-shadow: 2px 2px 4px #9C192A;
-webkit-box-shadow:2px 2px 4px #9C192A;
box-shadow:2px 2px 4px #9C192A;
}



Ver ejemplo 1


ESTILOS [+/-]


Ver ejemplo 2


ESTILOS [+/-]


Ver ejemplo 3


ESTILOS [+/-]

Mun2

Exente esta esta entrada Ahora A Probarlo :D

Responder
Gem@

:: Gracias por comentar UFE-Activo :)

Responder
Anónimo

En firefox (y supongo que en safari) se ve muy bien, queda un exelente efecto ;)

En IExplorer solo se ve bien en la versio 8, es una lastima porque el efecto es muy bonito.

Hay que esperar a que todos los navegadores reconozcan el CSS y se estandaricen

Responder
Gem@

:: Yo no pienso que sea una pena JorG porque los navegadores hay que actualizarlos, de las versiones antiguas deberíamos olvidarnos.

Responder
Magdalena

gracias gem@, aprendo muchisimo aca!
gracias otra vez x compartir :)

Responder
Magdalena

agrego q con Chrome tambien se ve genial ;)

Responder
Cokex

Que buen efecto Gema ya lo habia visto x otros blog, lastima que a mi no me resulto :(

Responder
Eva Flores

Hola Gema! Feliz año! gracias por este truco tan bueno.

Responder
SN.Systems

Hola, eh buscado y e intentado como enmarcar, poner un borde o un separador entre los comentarios pero aun no doy con el resultado y creo que no me vendria mal un poco de ayuda jeje.
Espero y puedas ayudarme
Muchas Gracias

Saludos...

Responder
Unknown

Es lo que estaba buscando, pero no sabía el nombre y apellido ;)

Bárbaro Piedra Preciosa, lo aplicaré en la sidebar, entonces tendré que pensar.

Estoy cuidando a dos pequeños, la mamá ha salido, pintan y me cuentan minuto a minuto lo que hacen jajaja para concentrarme!!!

Besos!!!

Responder
Gem@

:: Gracias por el comentario Saerwen y por la información :)

:: Coke ¿dónde lo has añadido?

:: Igualmente Eva, gracias!!

:: No sabría decirte Djnf porque no he podido ver tu blog :S

:: Graciela cualquier duda en añadir el efecto me dices algo.
Los artistas te acaparan :)

Responder
Cokex

No si he seguido tus pasos a pie de letra, si no me resulta es por que tengo un tipo de cursor distinto que las imagenes las tiene con opacidad, entonces para poder agregar este efecto debo borrar el que tengo y asi se vera...

Responder
Gem@

:: Pedes dejar la opacidad si te gusta y añadir estilos de borde Coke.

Responder
Anónimo
Este comentario ha sido eliminado por el autor.
Responder
Karen

ea! muchas gracias! me gusta mucho ese efecto y lo encontre por casualidad, ya he usado un par de trucos tuyos muy útiles.
oye como veo que mucha gente te hace consultas y les ayudas, espero me ayudes a mi también:
en mi blog, en las entradas, por mas que le cambio el formato de la letra, siempre queda super chiquita, no se a qué se deba, sabes algo de eso? no se si le pueda poner un formato default a todo el blog desde la plantilla, o alguna sugerencia?

Responder
Unknown
Este comentario ha sido eliminado por el autor.
Responder
Unknown

Wowowow!! :O siempre dando mucho mas de lo que te piden. Muchas gracias por tu ayuda Gema. :D Genial explicación; Voy a probarlo ahora mismo.

Responder
Gem@

:: Respondida tu pregunta en la última entrada Karen ;)

:: Cualquier duda ya me dices algo Toni´s :)

Responder
Gem@

:: Eliminaste tu comentario fede ¿todo bien?

Responder
Unknown

Lo eliminé porque quería poner la cara de asombro ( :0 ) no me salia y siguió sin salirme en el segundo comentario que hice. :S

Responder
Gem@

:: Debe ser la imagen del icono voy a verlo :)

Responder
Gem@

:: Ya funcionan todos :)

:) :'( :( :P :D :$ ;) :-I :X :O |O :S

Responder
Unknown

jajaja esta mañana me dispongo -luego de sacar un poco de tierra, hojas y demás que dejó el bendito viento sur-

¿a que no sabes qué?

Nuevamente los dos a pintar y dibujar, bien les doy las hojas, lápices, lapiceras...a cada rato 'tía mira lo que dibujé!!!
'tía te hago un auto: quieres fórmula 1, 2 o 3 :O

Enterada solo de la l, dije quiero una Ferrari, ahí la tuve, roja y las explicaciones...me quedo asombrada, el mayor tiene 5 y el menor 3.

Son los artistas que hacen que vuelva a la infancia :D

Responder
Gem@

:: Graciela mi sobrino de 9 años pasa muchos ratos conmigo, lo que más le entretiene es hablar de fútbol :O y no veas como habla y habla y habla... sería mucho mejor si pintara ferraris :)

Responder
Maite

Yo estoy con envidia sana porque cada vez que voy al blog de Graciela veo que ha hecho algo nuevo!!! y yo que no tengo cuerpo ahora para meterme con la plantilla que le haría falta...
pero voy apuntando ideas, eh?
tiembla Gema cuando me de por hacer cambios jajaja

Responder
Neo

Hola Gem@ !!!

Mirando esta entrada veo que al pinchar en cualquiera de las imágenes que tienes en los ejemplos, te sale una venta sombreado en gris oscuro con la imagen, el título y la X para cerrar dicha ventana.

¿Tienes explicado este truco? Es que que ya he utlizado varios trucos de este estilo en mi blog y no me funciona ninguno. Queía probar con éste.

Gracias

Responder
Unknown

Ya vendrá lo de fútbol supongo, aunque la mamá no los ha enviado aún.
Frente a mi casa tengo una cancha de fútbol, pero maltratan a los niños, ella ha decidido no enviarlos y la tía recontenta :)

Piedra Preciosa has leído que le 'regalamos a Messi' jajaja "de madera" en nuestra selección, ahora la madre ha realizado declaraciones de que no le queremos; de Fútbol nada io ;)

Minimimo I :D vamos que haces cosas bellísimas, que aún no he conseguido aprender.

Besos a las dos!!!

Responder
Gem@

:: Maite te he leído y antes de responder miré si tengo provisiones de tila en la despensa, cuando quieras podemos empezar no hay problema jajajaja

:: Hola Neo lo ves es la ventana modal de Lytebox después de muchas horas para dejarla así con esos estilos. Pero puedes ver como hacerlo
http://gemablog-.blogspot.com/2009/05/lytebox-otra-forma.html
y los resultados:
http://forevergema.blogspot.com/search/label/Lytebox

:: Graciela no leí sobre Messi pero mi sobrino me lo nombra tanto que parece de la familia :D

Responder
Unknown

Tesoro te pregunto:
si deseo aplicar el efecto 1 por ejemplo, la parte del html, la tengo en la sidebar en la historia de la semana, la imagen necesita el link...cómo se hace???

Muchas gracias :D

Responder
Gem@

:: Hola Graciela, para el ejemplo 1 en la plantilla añadimos antes de ]]></b:skin>

.border1 img{
padding: 5px;
background: #ffffff;
border-top: 1px solid #54692A;
border-left: 1px solid #54692A;
-moz-box-shadow: 2px 2px 4px #696969;
-webkit-box-shadow:2px 2px 4px #696969;
box-shadow:2px 2px 4px #696969;
}
.border1 img:hover {
padding: 2px;
background:#FFFFFF;
border: 4px double #9C192A;
-moz-box-shadow: 2px 2px 4px #9C192A;
-webkit-box-shadow:2px 2px 4px #9C192A;
box-shadow:2px 2px 4px #9C192A;
}

Y luego en la entrada donde vamos a añadir la imagen añadimos lo siguiente:
<div class="border1"><img src="url-de-la-imagen"/></div>

Donde dice url-de-la-imagen es el sitio donde pegaremos la url de la imagen a la que deseamos añadir el efecto ;)

Responder
Unknown

Piedra Preciosa he intentado con todos los ejemplos y nada...

en la cajita de la sidebar añado
div class="border1" img src="url-de-la-imagen div

tal como lo dices claro, si pongo todo error html en el coments

gracias!!!

Responder
Gem@

:: He probado tal y como lo tienes ahora mismo Graciela, y este es el resultado en mi blog de %% pruebas yo intentaría con otra imagen, si te fijas la que añadiste es mayor que el tamaño de la sidebar lo que ocurre que tiene un margen blanco que no se aprecia. No debería ser problema porque en todo caso debería mostrase el marco aunque cortando la imagen, es cuestión de probar con una imagen de menor tamaño y vemos que ocurre.

Responder
Unknown

snif snif antes pude apreciar lo bonito que te ha quedado, bien reduje el tamaño y nada :O

No se deja Piedra Preciosa :'(

Responder
Gem@

:: ¿Los estilos están antes de ]]></b:skin> Graciela? :S

Responder
Unknown

Tal como lo dices, si pongo en una entrada hace el efecto, en la sidebar no :'(

Responder
Gem@

:: Graciela estoy buscando tu mail para enviarte algo y no lo veo en tu blog ¿me envías uno y así me quedo con la dirección?
forevergema(arroba)gmail.com

Responder
Omar

Esta genial, le quedo muy bien a mi blog, Cracias

Responder
Gem@

:: Estupendo Omar :)

Responder
Lar2

Olle amix genial el aporte, vas a mis favoritos en mi blog...

Ahora mi pregunta es, de casualidad sabes como ponerle un limite o un bormde a mis entradas en la pagina e inicio para que no se vea cargado sino delimitado?'

muchas gracias ...

Te y los invito a que visiten mi blog http://atiiempo.blogspot.com/
On Time 2.0
ComenteN,Ayuden, Compartan y Diviértanse...

Salu2.

Responder
Gem@

:: No entiendo tu pregunta Lar2 :O

Responder
JJ's Company

Muchas Gracias me sirvio para la pagina web
http://www.colombiaguide.co

Responder
Willigan

Hola que tal, tengo una inquietud desde hace rato con respecto al efecto hover del borde en una image: cuando paso el mouse po encima, pega como un salto la imagen. ¿Hay alguna forma de que no pegue ese salto?

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top